<template> 
  <div class="grid-content" :style="{'height':height,'padding-bottom':'0px'}">
    <div class="grid-side" :style="{width:ajustLeft,padding:!openSpace? 0 : `0 0 ${paddingHorizonPx}px 0`}" v-if="!!leftSize">
      <div class="grid-side-inner" :style="{'height':height}">
        <slot name="page-left"></slot>
      </div>
    </div>
    <div :class="{'grid-main':true,'fullWidth':!hasAside}" :style="{paddingLeft: ajustLeftPadding}">
      <div class="grid-main-inner" ref="gridinner">
        <slot name="page-main"></slot>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: "i-pageBody",
    props: {
      hasAside: {
        type: Boolean,
        default: false
      },
      leftSize: {
        type: String,
        default: ""
      },
      height: {
        type: String,
        default: "100%"
      },
      openSpace: {
        type: Boolean,
        default: true
      }
    },
    components: {},
    created() {
      this.ajustLeftSize();
    },
    data() {
      return {
        footerSize: 50,
        ajustLeft: 0,
        ajustLeftPadding: 0,
        gapPx: 0, // 中间间隔
        paddingHorizonPx: 0, // 左右水平padding
        navbars: []
      };
    },
    methods: {
      ajustLeftSize() {
        // 调整高宽度
        let left = parseFloat(this.leftSize);
        if (left) {
          if (left < 10) {
            // 默认为px
            this.ajustLeft = left + "rem";
            let leftOffset = left;
            leftOffset = !this.openSpace ?
              left + 0.15 :
              left + this.gapPx / 100 - this.paddingHorizonPx / 100;
            this.ajustLeftPadding = leftOffset + "rem";
          } else {
            this.ajustLeft = left + "px";
            let leftOffset = left;
            leftOffset = !this.openSpace ?
              left + this.gapPx :
              left + this.gapPx - this.paddingHorizonPx;
            this.ajustLeftPadding = leftOffset + "px";
          }
        } else {
          this.ajustLeft = 0;
          this.ajustLeftPadding = 0;
        }
      }
    },

    mounted() {}
  };

</script>

<style lang="scss" scoped>

  .grid-content {
    padding: 0 0px 70px 0px;
    position: relative;
    box-sizing: border-box;
    height: 100%;
    z-index: 0;

    .grid-side {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 340px;
      padding: 0 0 20px 20px;

      .grid-side-inner {
        position: relative;
        overflow: auto;
        background-color: #fff;
        height: 100%;
        //padding:0 10px 10px;
        padding:10px 10px 10px;//左边树状结构外框上下左右间距调整为10px
        border-right:2px solid #f0f2f5;

        &>div {
          height: 100%;
        }

        .grid-side-content {
          height: 100%;
        }
      }
    }

    .grid-main {
      box-sizing: border-box;
      padding-left: 3.35rem;
      height: 100%;
      /*background-color: #fff;*/

      &.fullWidth {
        padding-left: 0;
      }

      .grid-main-inner {
        // background: #fff;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        // overflow-x: scroll;
        //margin-right: -20px;
        // padding-right: 20px;

        /deep/ .ivu-card {
          margin-top: 15px;

          &:first-child {
            margin-top: 0;
          }
        }

        &>div {
          height: 100%;
          min-height: 100%;
        }
      }
    }
  }
  .i-layout-blue .grid-content .grid-main{}
</style>
